Micron Document
baubs git

Node / mirrors / respira / commits / a0cb6d1

Commit a0cb6d18223f6f79c359b8e09f712eafe6aa3b11

󰉖 Browse tree at this commit

Parents : a077dea
Author : Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date : 2025-12-21T13:32:13+01:00

fix: Prevent PatternCanvas overflow on small screens

Replace fixed height values with flexbox sizing to prevent canvas overflow
when the window height is constrained.

Changes:
- Replace h-[400px] sm:h-[500px] lg:flex-1 with flex-1 on all screen sizes
- Add min-h-0 to CardContent and canvas container for proper flex shrinking
- Canvas now properly respects card boundaries on all screen sizes

The flex-1 min-h-0 pattern ensures the canvas takes available space without
overflowing its parent card, regardless of viewport size.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Changes

1 files changed, 2 insertions(+), 2 deletions(-)

M src/components/PatternCanvas.tsx +2 -2

Diff

diff --git a/src/components/PatternCanvas.tsx b/src/components/PatternCanvas.tsx
index 249784d..7fe875b 100644
--- a/src/components/PatternCanvas.tsx
+++ b/src/components/PatternCanvas.tsx
@@ -283,9 +283,9 @@ export function PatternCanvas() {
</div>
</div>
</CardHeader>
- <CardContent className="px-4 pt-0 pb-4 flex-1 flex flex-col">
+ <CardContent className="px-4 pt-0 pb-4 flex-1 flex flex-col min-h-0">
<div
- className="relative w-full h-[400px] sm:h-[500px] lg:flex-1 lg:min-h-0 border border-gray-300 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-900 overflow-hidden"
+ className="relative w-full flex-1 min-h-0 border border-gray-300 dark:border-gray-600 rounded bg-gray-200 dark:bg-gray-900 overflow-hidden"
ref={containerRef}
>
{containerSize.width > 0 && (

Served by rngit 1.3.3 - Generated in 0.08s